 *
  {
    margin: 0;
    padding: 0;
  }
  .Content
  {
    width: 100%;
    position: relative;
    top:0;
    left:0;
  }
  .top-picture
  {
    position: relative;
    width: 100%;
    top:0;
    left:0;
    z-index: 1;
  }
 .introduction p1
 {
  position: absolute;
  width:400px;
  height: 100px;
  font-size: 50px;
  right:100px;
  top:200px;
  color: white;
  font-weight: bold;
 }
 .introduction p2
 {
    position: absolute;
  width:200px;
  height: 80px;
  font-size: 30px;
  right: 100px;
  top:320px;
  color: white;
  font-weight: bold;
 }
 .introduction p1
 {
animation:mymove 3s linear 1;
-moz-animation:mymove 3s linear 1; /* Firefox */
-webkit-animation:mymove 3s linear 1; /* Safari and Chrome */
-o-animation:mymove 3s linear 1; /* Opera */
 }
@-moz-keyframes mymove /* Firefox */
{
0%{-moz-transform:scale(1,1);color:white;}
50%{-moz-transform:scale(1.5,1.5);color: #4b9287;}
100%{-moz-transform:scale(1,1);color: white;}
}
@-webkit-keyframes mymove 
{
0%{-moz-transform:scale(1,1);color:white;}
50%{-moz-transform:scale(1.5,1.5);color: #4b9287;}
100%{-moz-transform:scale(1,1);color: white;}
}
@-o-keyframes mymove /* Firefox */
{
0%{-moz-transform:scale(1,1);color:white;}
50%{-moz-transform:scale(1.5,1.5);color: #4b9287;}
100%{-moz-transform:scale(1,1);color: white;}
}
.introduction p2
{
  animation:Mymove 2s linear 1;
-moz-animation:Mymove 2s linear 1; /* Firefox */
-webkit-animation:Mymove 2s linear 1; /* Safari and Chrome */
-o-animation:Mymove 2s linear 1; /* Opera */
}
@-moz-keyframes Mymove /* Firefox */
{
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -30px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -10px, 0);
  }

  to {
    transform: translate3d(0, 0px, 0);
}

}
@-o-keyframes Mymove /* Firefox */
{
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -30px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -10px, 0);
  }

  to {
    transform: translate3d(0, 0px, 0);
}
}
@-webkit-keyframes Mymove /* Firefox */
{
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -30px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -10px, 0);
  }

  to {
    transform: translate3d(0, 0px, 0);
}
}
@media screen and (max-width: 1260px){
  .nav1
{
  
  list-style-type:none;
width:100%;
height: 80px;
background-color: #bebebe;
position: fixed;
margin:0px;
padding:0px;
overflow:hidden;
left:0;
top:0;
z-index: 20;
}
.nav1 ul
{
list-style: none;
}

.nav1 ul li 
{
float: left;
line-height: 40px;
text-align: center;
position: relative;
}

.nav1 li a:link,a:visited
{
  display:block;
  width:100px;
  height: 80px;
  text-align: center; font-color:white;
  font-size: 12px;
    background-color:#bebebe;
    padding: 10px;
    margin-left: 10px;
    text-decoration:none;
text-transform:uppercase;
-webkit-box-sizing: border-box;/*加了这三行代码后，這個元素的內距和邊框將不會增加元素本身的寬度。所以box5和box6的宽度是一样的*/
     -moz-box-sizing: border-box;
          box-sizing: border-box;

}
.nav1 a:hover,a:active
{
background-color:#aba9a9;
font-color:white;
}
/*.nav1 ul li ul li{
  float: none;
  background-color:#eee;
  margin-top: 2px; 
}
.nav1 ul li ul
{
  position: absolute;
  left:0px;
  top:80px;
  display: none;
}
.nav1 ul li ul li a{
  width: 200px;
}
.nav1 ul li ul li a:hover
{
  background-color:#06F; 
}*/
ul li:hover ul
{
  display: block;
}
}
@media screen and (min-width: 1260px){.nav1
{
  
  list-style-type:none;
width:100%;
height: 80px;
background-color: #bebebe;
position: fixed;
margin:0px;
padding:0px;
overflow:hidden;
left:0;
top:0;
z-index: 20;
}
.nav1 ul
{
list-style: none;
}

.nav1 ul li 
{
float: left;
line-height: 40px;
text-align: center;
position: relative;
}

.nav1 li a:link,a:visited
{
  display:block;
  width:200px;
  height: 80px;
  text-align: center; font-color:white;
  font-size: 14px;
    background-color:#bebebe;
    padding: 30px;
    margin-left: 10px;
    text-decoration:none;
text-transform:uppercase;
-webkit-box-sizing: border-box;/*加了这三行代码后，這個元素的內距和邊框將不會增加元素本身的寬度。所以box5和box6的宽度是一样的*/
     -moz-box-sizing: border-box;
          box-sizing: border-box;

}
.nav1 a:hover,a:active
{
background-color:#aba9a9;
font-color:white;
}
/*.nav1 ul li ul li{
  float: none;
  background-color:#eee;
  margin-top: 2px; 
}
.nav1 ul li ul
{
  position: absolute;
  left:0px;
  top:80px;
  display: none;
}
.nav1 ul li ul li a{
  width: 200px;
}
.nav1 ul li ul li a:hover
{
  background-color:#06F; 
}*/
ul li:hover ul
{
  display: block;
}
}
.information
{
  position: relative;
  width: 100%;
  background: -webkit-linear-gradient(left, #f9dddd, #e78f8f); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #f9dddd, #e78f8f); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #f9dddd, #e78f8f); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #f9dddd , #e78f8f); /* 标准的语法 */
    height: 400px;
    top: -5px;
}
.am
{
  width:100%;
  position: absolute;
 text-align: center;
 font-size: 50px;
 font-weight: bold;
 color: black;
}
.substance img
{
  width: 200px;
  height: auto;
  position: absolute;
  left: 20%;
}
.content
{
  width:45%;
  position: absolute;
  right:0px;
  padding-left:50px;
  padding-top:20px; 
  padding-bottom: 50px;
  text-align: center;
  border-left:1px solid black; 
}
.substance
{
  width: 100%;
  position: absolute;
  height: 300px;
  margin-top:100px; 
}
.name
{
  font-size: 30px;
  width:80%;
  border-bottom:1px solid black; 
}
.majar
{
  width: 80%;
  font-size: 20px;
}
.flow
{
  -webkit-column-width:202px;
  -moz-column-width:202px;
  -o-column-width:202px;
  -ms-column-width:202px;
  width: 100%;
  position: relative;
  margin-top: 50px;
   -webkit-column-gap:10px;
  -moz-column-gap:10px;
  -o-column-gap:10px;
  -ms-column-gap:10px;

    background: -webkit-linear-gradient(left, #fcfcfc, #e78f8f); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #fcfcfc, #e78f8f); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #fcfcfc, #e78f8f); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #fcfcfc, #e78f8f); /* 标准的语法 */
}
.box
{
  padding:10px 0 0 15px; 

}
.pic
{
  padding:10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0  0 5px #000; 
  background-color:#49447a; 
}
.pic img
{
  width:168px;
}
.words
{
  width: 100%;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  position: absolute;
  top: -50px;
  color: #9fdff8;
      background: -webkit-linear-gradient(left, #fcfcfc, #e78f8f); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #fcfcfc, #e78f8f); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #fcfcfc, #e78f8f); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #fcfcfc , #e78f8f); /* 标准的语法 */
}
.skill
{
  position: relative;
  top:100%;
  width:100%;
      background: -webkit-linear-gradient(left, #fcfcfc, #eca892); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right,#fcfcfc, #eca892); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right,#fcfcfc, #eca892); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, #fcfcfc, #eca892); /* 标准的语法 */
}
.skills
{
  width:90%;
  position: relative;
  padding: 10px;
  margin: 0 auto;
  font-weight: bold;
  color: #46b0b0;

}
.loadbar{  
                width:50%;  
                background-color: silver;  
                border:1px solid salmon;  
                text-align: center;  
                border-radius:8px ;  
               position: relative;
               left: 30%;
            }  
.bar{  
                display: block;  
                font-family: arial;  
                font-size: 12px;  
                background-color: #e3a196;  
                text-align: center;  
                padding: 5px;  
                border-radius:5px ;  
                   
            }  
.title
{
  width: 100%;
  font-size: 50px;
  font-weight: bold;
  padding-top: 40px;
  padding-bottom: 20px;
  text-align: center;
  margin-bottom: 10px;
  color:#7199e0;
}
@media screen and (min-width: 1156px){
     .clearfix:after{
        display:block;
        content:'';
        clear:both;
     }
     .nav{
      text-align:center;
      margin:4rem 0;
      font-weight: bold;
      color: black;
     }
     .wrapper{
      position: relative;
      display:inline-block;
      text-align: center;

     }
     .nav .wrapper:after{
      position: absolute;
        bottom: -0.2rem;
      display:block;
      content:'';
      width:100%;
      height:5px;
      background-color: #A5E7E7;
      z-index: 1;
     }

     .nav a{
      float:left;
      color:#000;
      padding:1.2rem 3.6rem;
      display:block;
      position:relative;
     }
     .nav a:hover{color:red;
}
    .nav a:after{
      position:absolute;
      top:8.8rem;
      left:45%;
      display:block;
      content:'';
      width:1.2rem;
      height:1.2rem;
      background-color: #BDCEF2;
      border-radius:100%;
      z-index: 2;
    }
    .dot{
      display:block;
      position:absolute;
      top:8.7rem;
      left:-12.5%;
      width:1.5rem;
      height:1.5rem;
      background-color: #469DD4;
      border-radius:100%;
      opacity:0;
      -webkit-transition: 0.8s ease-in-out;
      -moz-transition: 0.8s ease-in-out;
      -o-transition: 0.8s ease-in-out;
      -ms-transition: 0.8s ease-in-out;
       transition: 0.8s ease-in-out;
       z-index: 3;
    }
    .nav a:first-child:hover ~.dot{
      left:10.5%;
    }
    .nav a:nth-child(2):hover ~.dot{
      left:34%;
    }
    .nav a:nth-child(3):hover ~.dot{
      left:59.5%;
    }
    .nav a:nth-child(4):hover ~.dot{
      left:86%;
    }
    .nav a:hover ~.dot{
      opacity:1;
    }
         a,a:hover,a:focus{text-decoration: none;}
     ul,li{list-style: none;}
}
 @media screen and (max-width: 1156px){
     .clearfix:after{
        display:block;
        content:'';
        clear:both;
     }
     .nav{
      text-align:center;
      margin:4rem 0;
      font-weight: bold;
      color: black;
     }
     .wrapper{
      position: relative;
      display:inline-block;
      text-align: center;

     }
     .nav .wrapper:after{
      position: absolute;
        bottom: -0.2rem;
      display:block;
      content:'';
      width:100%;
      height:5px;
      background-color: #A5E7E7;
      z-index: 1;
     }

     .nav a{
      float:left;
      color:#000;
      padding:0.5rem 0.5rem;
      display:block;
      position:relative;
     }
     .nav a:hover{color:red;
}
    .nav a:after{
      position:absolute;
      top:7.6rem;
      left:45%;
      display:block;
      content:'';
      width:0.5rem;
      height:0.5rem;
      background-color: #BDCEF2;
      border-radius:100%;
      z-index: 2;
    }
    .dot{
      display:block;
      position:absolute;
      top:7.6rem;
      left:-12.5%;
      width:1.0rem;
      height:1.0rem;
      background-color: #469DD4;
      border-radius:100%;
      opacity:0;
      -webkit-transition: 0.8s ease-in-out;
      -moz-transition: 0.8s ease-in-out;
      -o-transition: 0.8s ease-in-out;
      -ms-transition: 0.8s ease-in-out;
       transition: 0.8s ease-in-out;
       z-index: 3;
    }
    .nav a:first-child:hover ~.dot{
      left:10%;
    }
    .nav a:nth-child(2):hover ~.dot{
      left:33%;
    }
    .nav a:nth-child(3):hover ~.dot{
      left:58%;
    }
    .nav a:nth-child(4):hover ~.dot{
      left:85.5%;
    }
    .nav a:hover ~.dot{
      opacity:1;
    }
         a,a:hover,a:focus{text-decoration: none;}
     ul,li{list-style: none;}
}

     .pictures
     {
       width:1600px;
       height:550px;
       position: absolute;
       z-index: 1
     }
     .container
     {
      width: 400px;
      height: 550px;
      position: relative;
      overflow: hidden;
      margin: 0 auto;
     }
     .pictures img
     {
      float: left;
      width: 400px;
      height: 550px;
      z-index: 1;
     }
     .SHOW
     {
      width: 100%;
      position: relative;
      padding-top: 40px;
     }

     #icon2 img
     {
      width: 50px;
      height: auto;
      z-index: 2;
      top:250px;
      right:20%;

     }
     #icon1 img
     {
            width:50px;
            height: 50px;
      z-index: 2;
      top:250px;
      left: 20%;
     }
#icon1
{
       width: 50px;
       height: 50px;
      height: auto;
      z-index: 2;
      position: absolute;
      top:250px;
      left:20%;

}
#icon2
{
         width: 50px;
         height: 50px;
      z-index: 2;
      position: absolute;
      top:250px;
      right:20%;

}
.show
{
font-size: 30px;
color:#a279d5;
text-align: center;
font-weight: bold;
padding-bottom: 30px;
}
.end
{
  width:70%;
  height: 400px;
  position: relative;
  padding:5% 15%;
  margin: 0 auto;
  background: url('../img/1.jpg') no-repeat 100%;
  background-size: 100% 100%;

}
.box1
{
  width:20%;
  position: absolute;
  height:350px;
 padding: 20px;
 border: 1px solid #ccc;
 border-radius: 5px;
 margin-right: 20px;
 color: white;
}
.box1 h3
{
  text-align: center;
  font-size: 30px;

}
.box2
{
  width:40%;
  float: left;
  position: absolute;
  border: 1px solid #ccc;
  border-radius: 5px;
  left:45%;
  height:160px;
  padding:20px;
  color: #b2dab5;
}
.box2 h3
{
  text-align: center;

}
.box3
{
    width:40%;
  float: left;
  position: absolute;
  border: 1px solid #ccc;
  border-radius: 5px;
  left:45%;
  top:320px;
  padding:20px;
  color:#5cdad1;
}